<template>
  <div class="TemplateManage h-full bg-white">
    <a-button type="primary" @click="addTemplate">新建</a-button>
    <div class="table">
      <a-table
        bordered
        :data-source="tableData"
        :pagination="pagination"
        :columns="columns"
        :custom-row="customRow"
      >
        <template slot="xh" slot-scope="text, record, index">
          {{index + 1}}
        </template>
        <template slot="dynamicTemplate" slot-scope="text">
          {{ text ? '开' : '关' }}
        </template>
        <template slot="createTime" slot-scope="text">
          {{ moment(text).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
        <template slot="opt" slot-scope="text, record">
          <a-icon @click="editTemplate(record)" class="cur-pointer m-r-sm" type="edit" theme="twoTone" />
          <a-icon @click="deleteTemplate(record.id)" class="cur-pointer" style="color: red" type="delete" />
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
  import { getColumns } from '@/api/tableColumns'
  import messageTemplateService from '@/api/messageTemplateService'
  import moment from 'moment'
export default {
  name: 'TemplateManage',
  data () {
    return {
      tableData: [],
      columns: getColumns('templateManage'),
      pagination: {
        pageSize: 10,
        total: 0,
        current: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100', '200', '500'],
        showTotal: (total) => `共${total}条数据`,
        onShowSizeChange: (current, pageSize) => {
          this.pagination.pageSize = pageSize
          this.search()
        },
        onChange: (current, pageSize) => {
          this.pagination.current = current
          this.pagination.pageSize = pageSize
          this.search()
        }
      }
    }
  },
  created () {
    this.search()
  },
  methods: {
    moment,
    async search () {
      const dada = await messageTemplateService.getMessageTemplateList()
      if (dada.length) {
        this.tableData = dada
      }
    },
    addTemplate () {
      const _this = this
      this.$dialog({
        title: '新建模板',
        content: () => import('./dialog/TemplateDetail'),
        width: 700,
        centered: true,
        maskClosable: false,
        on: {
          async ok (ctl) {
            const dialogCtl = ctl.getDialogCtl()
            const d = await messageTemplateService.addMessageTemplate(dialogCtl.form)
            d.id ? _this.$message.success('新建成功') : _this.$message.error('新建失败')
            await _this.search()
            ctl.closeDialog()
          }
        }
      })
    },
    customRow (record, index) {
      return {
        on: {
          dblclick: () => {
            this.editTemplate(record)
          }
        }
      }
    },
    editTemplate (record) {
      const _this = this
      this.$dialog({
        title: '编辑模板',
        content: () => import('./dialog/TemplateDetail'),
        width: 700,
        props: {
          template: record
        },
        centered: true,
        maskClosable: false,
        on: {
          async ok (ctl) {
            const dialogCtl = ctl.getDialogCtl()
            const d = await messageTemplateService.updateMessageTemplate(dialogCtl.form)
            d.id ? _this.$message.success('修改成功') : _this.$message.error('修改失败')
            await _this.search()
            ctl.closeDialog()
          }
        }
      })
    },
    deleteTemplate (id) {
      const _this = this
      this.$confirm({
        title: '提示',
        content: '确认执行删除操作',
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
          const d = await messageTemplateService.deleteMessageTemplate({ messageTemplateId: id })
          d ? _this.$message.success('删除成功') : _this.$message.error('删除失败')
          await _this.search()
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.TemplateManage{
  padding: 10px;
  .table{
    padding: 10px 0 30px 0;
  }
}
</style>
